<template>
  <div class="index">
    <div class="top-left">
       {{pageInfo}}
    </div>
    <!--上部图标，后期将数据放入js中-->
    <div class="index-icon" >
      <div class="el-icon-s-marketing"></div>
      <div class="index-name">{{pageTitle}}</div>
    </div>

    <!--用户订单-默认查询所有用户的订单情况，这是简短版本-->
    <div class="index-right">
       <p style="color: #ead169;font-size: 1.2rem;">{{info_front}}</p>
       <p style="color: #FEE976;font-size: 1.5rem;">{{list}}</p>
       <div class="infintInfo">
         <ul style="color: #FFF9EC;text-align: left;">
             <li style="margin-top: 15px;" v-for="(obj,index) in dataOfAll" v-bind:key="obj.money">
             金额:{{obj.money}}-客户:{{obj.cusName}}-产品:{{obj.proName}}
             </li>
         </ul>

         {{dataIndivadual}}
       </div>
    </div>
    <!--用户信用度划分，默认加载为首位-->
    <div class="chart-main">
      <div id="main" style="width:750px; height:400px"></div>
    </div>
    <!--用户等级划分，默认加载为首位-->
    <div class="chart-first">
      <div id="first" style="width:375px; height:200px"></div>
    </div>
    <!--用户满意度划分，默认加载为首位-->
    <div class="chart-second">
      <div id="second" style="width:375px; height:200px"></div>
    </div>

    <div class="classify-customer">
      <p>给我们评分：</p>
      <el-rate v-model="value1"></el-rate>
    </div>
  </div>
</template>

<script>
  const echarts = require('echarts');//按需加入echarts
  import axios from 'axios';
  export default {
    data() {
        return {
          pageInfo: '客户划分',
          pageTitle:'客户图表分析',
          list:'客户订单',
          value:0,
          dataOfAll:[] ,
          dataIndivadual : null,
          info_front:'总成交金额：',
          info: null,
          value1:3,
        }
      },
    mounted() {
      //调用methods中的echarts方法
      this.myEcharts();
      //调用methods中的myEchartsFirst方法
      this.myEchartsFirst();
      //调用methods中的myEchartsSecond方法
      this.myEchartsSecond();

      //调用定时器
      this.$nextTick(() => {
          //setInterval(this.CurentTime, 1000);
      });

      this.sumMoney();

      this.getAllOrders();
    },
    methods:{
      //定时器
       CurentTime() {
         this.value++;
         console.log(this.value);
       },

       //无限加载
       load () {

         this.getOrderByName(input);

       },

       getOrderByName(name){
         //AJAX获取后台数据
         this.$axios
           .post('http://localhost:777/api/Statistic/getAllInfoByName',name)
           .then(response => {
              this.dataIndivadual = response.data.obj;
            })
           .catch(function (error) { // 请求失败处理
             console.log(error);
           });
       },

       getAllOrders(){
         //AJAX获取后台数据
         this.$axios
           .post('http://localhost:777/api/Statistic/getAllCOP')
           .then(response => {
              this.dataOfAll = response.data.obj;
            })
           .catch(function (error) { // 请求失败处理
             console.log(error);
           });
       },

       sumMoney(){
         //AJAX获取后台数据
         this.$axios
           .post('http://localhost:777/api/Statistic/getSumMoney')
           .then(response => {
              this.list=response.data.obj;
            })
           .catch(function (error) { // 请求失败处理
             console.log(error);
           });
       },

       //Echarts方法(提供信用度划分)
       myEcharts(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('main'));

          // 指定图表的配置项和数据
          var option = {
            grid: {
                left:35,
                bottom:20,
            },
            title: {
                show: true, //显示折线图
                text: '用户信用度划分', //标题文字
                //link: 'http://echarts.baidu.com/option.html#title.link', //主标题超文本链接,
                subtext: '用户信用度柱状图', //副标题
                left: 20, //配置title的位置
                padding: [5,10,5,10] //title的padding值
            },
            tooltip: {},
            toolbox: {
                show: true, //是否显示工具栏组件
                orient: 'vertical', //工具栏icon的布局朝向
                itemSize: 18, //工具栏icon的大小
                itemGap: 20, //item之间的间距
                right: 20, //toolbox的定位位置
                feature: {
                    saveAsImage: { show: true }, //导出图片
                    dataView: { show: true }, //数据视图
                    magicType: { //动态类型切换
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    dataZoom: { show: true }, //数据区域缩放
                    restore: { show: true }, //重置
                },
            },
            legend: {
              data:['信用度']
            },
            xAxis: {
              data: []
            },
            yAxis: {},
            series: [{
              name: '信用度',
              type: 'bar',
              data: []
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          //AJAX获取后台数据
          this.$axios
            .post('http://localhost:777/api/Statistic/findAllCusByCredit')
            .then(response => {
               myChart.setOption({
                    xAxis: {
                        data: response.data.obj.x
                    },
                    series: [{
                        name: '信用度',
                        data: response.data.obj.y
                    }]
               });
            })
            .catch(function (error) { // 请求失败处理
              console.log(error);
            });
       },

       //Echarts方法(提供满意度划分)
       myEchartsFirst(){
          // 基于准备好的dom，初始化echarts实例
          let myEchartsFirst = this.$echarts.init(document.getElementById('first'));

          // 指定图表的配置项和数据
          var option = {
            grid: {
                left:24,
                bottom:20,
            },
            title: {
                show: true, //显示折线图
                text: '用户满意度划分', //标题文字
                //link: 'http://echarts.baidu.com/option.html#title.link', //主标题超文本链接,
                subtext: '用户满意度折线图', //副标题
                left: 12, //配置title的位置
                padding: [5,10,5,10] //title的padding值
            },
            tooltip: {},
            toolbox: {
                show: true, //是否显示工具栏组件
                orient: 'vertical', //工具栏icon的布局朝向
                itemSize: 18, //工具栏icon的大小
                itemGap: 20, //item之间的间距
                right: 0, //toolbox的定位位置
                feature: {
                    //saveAsImage: { show: true }, //导出图片
                    //dataView: { show: true }, //数据视图
                    dataZoom: { show: true }, //数据区域缩放
                    restore: { show: true }, //重置
                },
            },
            legend: {
              left:180,
              top:6,
              data:['满意度']
            },
            xAxis: {
              data: []
            },
            yAxis: {},
            series: [{
              name: '满意度',
              type: 'line',
              data: []
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myEchartsFirst.setOption(option);
          //AJAX获取后台数据
          this.$axios
            .post('http://localhost:777/api/Statistic/findAllCusByStatisfy')
            .then(response => {
               myEchartsFirst.setOption({
                    xAxis: {
                        data: response.data.obj.x
                    },
                    series: [{
                        name: '满意度',
                        data: response.data.obj.y
                    }]
               });
            })
            .catch(function (error) { // 请求失败处理
              console.log(error);
            });
       },

       //Echarts方法(提供用户等级划分)
       myEchartsSecond(){
          // 基于准备好的dom，初始化echarts实例
          let myEchartsSecond = this.$echarts.init(document.getElementById('second'));

          // 指定图表的配置项和数据
          var option = {
            grid: {
                right:0,
                top:20,
            },
            title: {
                show: true, //显示折线图
                text: '用户等级划分', //标题文字
                //link: 'http://echarts.baidu.com/option.html#title.link', //主标题超文本链接,
                //subtext: '熟悉title的配置项', //副标题
                left: 12, //配置title的位置
                padding: [5,10,5,10] //title的padding值
            },
            tooltip: {},
            toolbox: {
                show: true, //是否显示工具栏组件
                orient: 'vertical', //工具栏icon的布局朝向
                itemSize: 18, //工具栏icon的大小
                itemGap: 20, //item之间的间距
                right: 0, //toolbox的定位位置
                feature: {
                    //saveAsImage: { show: true }, //导出图片
                    //dataView: { show: true }, //数据视图
                    dataZoom: { show: true }, //数据区域缩放
                    restore: { show: true }, //重置
                },
            },
            series: [{
              name: '用户等级',
              type: 'pie',
              radius: '55%',
              data: [{value:2,name:'VIP客户'},
              {value:3,name:'合作伙伴'}, ]
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myEchartsSecond.setOption(option);
          //AJAX获取后台数据
          this.$axios
            .post('http://localhost:777/api/Statistic/findAllCusByLevel')
            .then(response => {
               myEchartsSecond.setOption({
                    series: [{
                        name: '等级',
                        //利用后端的Echarts实体，成功将数据传过来！！！
                        data:response.data.obj.x,
                    }]
               });
            })
            .catch(function (error) { // 请求失败处理
              console.log(error);
            });
       },
    },
  }
</script>

<style>
  .index{
    margin: 0 auto;
    height: 700px;
    width: 1250px;
    padding: 16px;
    background-color: #c6e2ff;
  }
  .top-left{
    float: left;
    height: 40px;
    width: 96px;
    /* background-color:#aaaaff; */
  }
  .index-icon{
    display: inline-block;
    height: 40px;
    width: 150px;

  }
  .el-icon-s-marketing{
     font-size: 40px;
  }
  .index-name{
    margin-bottom: 20px;
    /* background-color: #0000FF; */
    display: inline-block;

  }

  .index-right{
    float: right;
    width: 280px;
    height: 480px;
    background-color: #0074D9;
    border-radius: 5px;
  }

  .chart-main{
    float: left;
    height: 420px;
    width: 920px;
    background-color: #cdffff;
    margin-top: 16px;
    border-radius: 5px;
  }

  .chart-first{
    float: left;
    height: 210px;
    width: 460px;
    margin-top: 18px;
    background-color: #cdffff;
    border-radius: 5px;
  }

  .chart-second{
    float: left;
    height: 210px;
    width: 460px;
    margin-top: 18px;
    margin-left: 16px;
    background-color: #cdffff;
    border-radius: 5px;
  }

  .classify-customer{
    float: right;
    height: 200px;
    width: 284px;
    margin-top: 18px;
    background-color: #cdffe9;
    border-radius: 5px;
  }
</style>
